/*
 * @Author: wangtao
 * @Date: 2021-04-08 18:48:23
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-14 16:58:12
 * @Description: file content
 */

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  ImageBackground,
  TouchableOpacity,
} from 'react-native';
import { iconCamera } from '@/images';
import {
  mainBgColorLightGray,
  px2dp,
  fontColorSecDeepGray,
} from '@/styles';

export default class CameraCard extends React.Component {
  onCatchImage = () => {
    const { type } = this.props;
    this.props.onCatchImage && this.props.onCatchImage(type);
  };

  render() {
    const { title, imgUrl, defaultBg } = this.props;
    return (
      <View style={styles.cardWrap}>
        <TouchableOpacity
          activeOpacity={0.8}
          style={styles.card}
          onPress={this.onCatchImage}
        >
          {imgUrl ? (
            <Image
              source={{ uri: imgUrl }}
              resizeMode='stretch'
              style={styles.selectedImage}
            />
          ) : (
            <ImageBackground style={styles.bgStyle} source={defaultBg}>
              <Image
                source={iconCamera}
                resizeMode='stretch'
                style={styles.cameraImg}
              />
            </ImageBackground>
          )}
        </TouchableOpacity>
        <Text style={styles.desc}>{title}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  card: {
    width: px2dp(330),
    height: px2dp(202),
    borderRadius: px2dp(14),
    backgroundColor: mainBgColorLightGray,
    justifyContent: 'center',
    alignItems: 'center',
  },
  bgStyle: {
    display: 'flex',
    alignItems: 'center',
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center',
    width: px2dp(330),
    textAlign: 'center',
  },
  cameraImg: {
    width: px2dp(85),
    height: px2dp(85),
  },
  desc: {
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
    marginTop: px2dp(24),
    textAlign: 'center',
  },
  selectedImage: {
    width: '100%',
    height: '100%',
  },
});
